<template>
  <div class="film-detail">
    <detail-header v-top>
      <van-nav-bar
        @click-left="$router.back()"
      >
        <template #left>
          <van-icon color="black" name="arrow-left" size="18" style="display:block;"/>
        </template>
        <template #title>
          <div style="font-size: 17px;">{{ filmInfo.name }}</div>
        </template>
      </van-nav-bar>
    </detail-header>
    <Poster :imgUrl="filmInfo.poster"></Poster>
    <Description :detail="filmInfo"></Description>
    <Actors :actors="filmInfo.actors" style="width: 100%;"></Actors>
    <Photos :photos="filmInfo.photos" style="margin-bottom: 16vw;"></Photos>
    <div class="goSchedule">选座购票</div>

  </div>
</template>

<script>
import Poster from '@/views/detail/Poster'
import http from '@/util/http'
import Description from '@/views/detail/Description'
import Actors from '@/views/detail/Actors'
import Photos from '@/views/detail/Photos'
import DetailHeader from '@/views/detail/DetailHeader'
import Vue from 'vue'
import { Icon, NavBar } from 'vant'

Vue.use(NavBar).use(Icon)
// TODO: Vue指令
Vue.directive('top', {
  inserted (el) {
    console.log(el)
    el.style.display = 'none'
    window.onscroll = () => {
      if ((document.body.scrollTop || document.documentElement.scrollTop) > 50) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  }
})

export default {
  name: 'Detail',
  components: {
    DetailHeader,
    Poster,
    Description,
    Actors,
    Photos
  },
  data () {
    return {
      filmInfo: []
    }
  },
  mounted () {
    http({
      url: `/gateway?filmId=${this.$route.params.id}&k=5435854`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      this.filmInfo = res.data.data.film
    })
  }
}
</script>

<style scoped>
.goSchedule {
  position: fixed;
  height: 13vw;
  bottom: 0;
  width: 100%;
  background-color: #ff5f16;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  z-index: 10;
}
</style>
